<html>
 <head>
  <title>CaptureIt</title>
 </head>
 <body>
  <!-- via http://www.html5rocks.com/en/tutorials/getusermedia/intro/
       and http://stackoverflow.com/questions/15322352/capturing-video-from-web-browser-in-html5
       and http://www.scottpreston.com/articles/1442.php -->
  <device type="media" onchange="update(this.data)"></device>
  <video autoplay="" width="320" height="240"></video>
  <script>
    var onFailSoHard = function(e) {
      console.log('Reeeejected!', e);
    };

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    // Not showing vendor prefixes.
    navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);

      // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
      // See crbug.com/110938.
      video.onloadedmetadata = function(e) {
        // Ready to go. Do some stuff.
      };
    }, onFailSoHard);
    function update(stream) {
      document.querySelector('video').src = stream.url;
    }
  </script>
 </body>
</html>